import { Button as AntdButton } from "antd";
import { ButtonType } from "antd/es/button";
import { CSSProperties } from "react";
import { useDrag } from "react-dnd";

export interface ButtonProps {
    type: ButtonType,
    text: string;
    id: number;
    styles?: CSSProperties;
}

const Button = ({ id, type, text, styles }: ButtonProps) => {
    const [_, drag] = useDrag({
        type: 'Button',
        item: {
            type: "Button",
            dragType: 'move',
            id
        }
    })

    return (
        <AntdButton ref={drag} style={styles} data-component-id={id} type={type}>{text}</AntdButton>
    )
}

export default Button;